<template>
  <view class="container">
    <upload
      ref="upload"
      :action="action"
      :file-list="fileList"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :max-size="5242880"
      :max-count="maxImageCount"
      :size-type="sizeType"
      @on-choose-complete="onChooseComplete"
      @on-success="onUploadSuccess"
      @on-uploaded="onUploaded"
      @on-error="onError"
      @on-remove="onRemove"
    ></upload>
  </view>
</template>

<script>
    import {getUploadSignature} from "@/common/js/api/models.js";

    export default {
        name: "uploadGroup",
        props: {
            maxImageCount: {
                type: Number,
                default: 9,
            },
            uploadImageDir: {
                type: String,
            },
            uploadId: {
                type: String,
            },
            sizeType: {
                type: Array,
                default: ["compressed"],
            },
            fileList: {
                type: Array,
                default: [],
            },
        },
        data() {
            return {
                lists: [],
                imageSrc: "",
                action: "",
                formData: {},
                signData: {}, //获取签名的数据
                tempFinalSrc: {}, //
                imageList: [],
            };
        },
        methods: {
            /**
             * @description 单个文件上传成功后回调
             * @param list  上传文件列表
             */
            onChooseComplete(list) {
                this.$emit("onChooseComplete");
            },
            /**
             * @description 单个文件上传成功后回调
             * @param data 上传文件成功后的响应
             * @param listsIndex 上传文件信息列表下标
             * @param lists  上传文件信息列表
             */
            onUploadSuccess(data, listsIndex, lists) {
                this.imageList.push(this.tempFinalSrc);
                console.log(this.tempFinalSrc);
            },
            /**
             * @description: 所有图片上传成功后的回调
             */
            onUploaded(lists) {
                console.log("所有图片上传成功");
                this.$emit("onImageUploaded", this.imageList, this.uploadId);
            },
            /**
             * @description 上传文件前回调
             * @param listsIndex 上传文件信息列表下标
             * @param lists  上传文件信息列表
             */
            beforeUpload(listsIndex, lists) {
                return new Promise((resolve, reject) => {
                    const dir = this.uploadImageDir;
                    let tempPath = lists[listsIndex].file.path;
                    let fileSuffix = tempPath.substr(tempPath.lastIndexOf("."));
                    getUploadSignature({queryData: {dir: dir}})
                        .then((res) => {
                            let signData = res.data; // 拿到后端返回数据
                            this.action = signData.host; //上传的url
                            let key = signData.dir + signData.uuid + fileSuffix; // 组合保存到云的文件路径
                            if (res.success) {
                                this.$refs.upload.formData = {
                                    key: key,
                                    policy: signData.policy,
                                    OSSAccessKeyId: signData.accessId,
                                    success_action_status: "200", //让服务端返回200,不然，默认会返回204
                                    signature: signData.signature,
                                };
                                this.tempFinalSrc = signData.host + "/" + key;
                                resolve();
                            }
                            else {
                                reject();
                                console.log("获取签名失败", res);
                            }
                        })
                        .catch((err) => {
                            console.log("getUploadSignature错误", err);
                            uni.showModal({
                                title: "警告",
                                content: `获取签名发生错误：${err}`,
                                success: function (res) {
                                    if (res.confirm) {
                                    }
                                    else if (res.cancel) {
                                    }
                                },
                            });
                        });
                });
            },
            /**
             * @description: 错误发生的回调
             * @param {*} err 错误原因
             * @param {*} index 错误下标
             */
            onError(err, index) {
                uni.showModal({
                    title: "警告",
                    content: `上传图片出现错误，出现在下标【${index}】：${err}`,
                    success: function (res) {
                        if (res.confirm) {
                        }
                        else if (res.cancel) {
                        }
                    },
                });
                throw err;
            },
            /**
             * @description 移除图片的回调
             * @param listsIndex 移除图片列表下标
             * @param lists  当前文件列表
             */
            onRemove(listsIndex, lists) {
                this.$emit("onRemoveImage", listsIndex, lists);
            },
        },
    };
</script>

<style lang="scss" scoped>
  .slot-btn {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $uni-color-grey;
    border-radius: 20rpx;
    margin: 8rpx;
  }
  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $uni-color-grey;
    margin: 8rpx;
  }
</style>
